html {
  font:system;
  font-size:11pt;

  var(accent)      : window-accent-color;
  var(accent-text) : #fff;
  var(lighten5) : morph(window-accent-color, lighten:60%);
  var(lighten4) : morph(window-accent-color, lighten:53%);
  var(lighten3) : morph(window-accent-color, lighten:41%);
  var(lighten2) : morph(window-accent-color, lighten:30%);
  var(lighten1) : morph(window-accent-color, lighten:12%);
  var(darken1)  : morph(window-accent-color, darken:3%);
  var(darken2)  : morph(window-accent-color, darken:6%);
  var(darken3)  : morph(window-accent-color, darken:9%);
  var(darken4)  : morph(window-accent-color, darken:12%);
  var(accent1)  : morph(window-accent-color, rotate:-20deg);
  var(accent2)  : morph(window-accent-color, rotate:-10deg);
  var(accent3)  : morph(window-accent-color, rotate:10deg);
  var(accent4)  : morph(window-accent-color, rotate:20deg);

  var(panel): #fff;
  var(panel-text): #000;

  var(danger-color) : #db3737; // red
  var(success-color): #0f9960; // green
  var(warning-color): #d9822b; //gold?

  var(button-face): color(lighten4);
  var(button-text): #000;

  var(widget-back): #fff;
  var(widget-text): #000;

  var(disabled-text): #999;
}

@set std-button < std-button-base {
  :root {
    flow: horizontal;
    aspect: Ripple url(theme.js);
    color: color(button-text);
    background: color(button-face);
    box-shadow: #888 1dip 1dip 1dip;
    cursor:pointer;
    padding:0.5em 1em;
  }

  //:root:hover { background: color(lighten3); }
  //:root:active { background: color(lighten5); }

  :root:tab-focus {
    outline: 1dip dashed color(accent) -4dip;
  }

  :root:not(:disabled).primary,
  :root:not(:disabled)[role="default-button"] {
    var(button-face): color(accent);
    color:color(accent-text);
    fill:color(accent-text);
  }

  :root.primary:active,
  :root[role="default-button"]:active {
    background: color(accent);
  }

  :root.danger {
    var(button-face): color(danger-color);
    color:color(accent-text);
  }

  :root.success {
    var(button-face): color(success-color);
    color:color(accent-text);
  }

  :root.warning {
    var(button-face): color(warning-color);
    color:color(accent-text);
  }

  :root:disabled {
    background:color(button-face-disabled);
    color: color(disabled-text);
    box-shadow: none;
  }
}

@set std-edit {
  :root {
    display:block;
    background:transparent;
    color:color(widget-text);
    padding-top:0.5em;
    border-bottom:1dip solid #bbb;
    min-width: 6em;
    width:*;
    background: url(stock:block) center bottom no-repeat;
    background-size: 0% 2dip;
    background-clip: border-box;
    fill: color(accent);
    transition: background-size quad-out 160ms;
    flow:text;
    cursor:text;
    white-space:pre;
    behavior:edit;
    line-height:1.6em;
  }

  :root::marker {
    margin-top:0.5em;
    line-height:1.6em;
    width:*;
    transform-origin: 0% 0%;
    color:#777;
    content: attr(placeholder);
    transition: transform quad-out 160ms;
  }

  :root:owns-focus::marker,
  :root:not(:empty)::marker {
    transform: translate(0,-80%) scale(0.7);
  }

  :root:owns-focus {
    background-size: 100% 2dip;
  }

  :root[nullable] {
    padding-right: 1.2em;
    foreground-position: top 50% right 0.5em;
    foreground-repeat: no-repeat;
    foreground-image-cursor: pointer;
    foreground-size: 0.5em;
    //fill:currentcolor;
    stroke:none;
    box-sizing: content-box;
  }

  :root[nullable]:not(:empty) {
    //fill:transparent;
    foreground-image: url(stock:cross-x);
  }
}


@set std-number-edit < std-number-edit-base {
  :root {
    display:block;
    background:transparent;
    color:color(widget-text);
    padding-top:0.5em;
    border-bottom:1dip solid #bbb;
    width:8em;
    background: url(stock:block) center bottom no-repeat;
    background-size: 0% 2dip;
    background-clip: border-box;
    fill: color(accent);
    transition: background-size quad-out 160ms;
    flow:horizontal;
    border-spacing:1dip;
    line-height:1.6em;
  }

  :root::marker {
    margin-top:0.5em;
    line-height:1.6em;
    width:*;
    margin-right: 3.2em;
    transform-origin: 0% 0%;
    color:#777;
    content: attr(placeholder);
    transition: transform quad-out 160ms;
    z-index:-1;
  }

  :root:owns-focus::marker,
  :root:not(:empty)::marker {
    transform: translate(0,-80%) scale(0.7);
  }

  :root:owns-focus {
    background-size: 100% 2dip;
  }

  //:root:owns-popup,
  //:root:focus            { text-selection: color(selection-text) color(selection); }
  //:root:disabled         { background:color(widget-disabled); color:color(widget-disabled-text); }
  //:root:tab-focus        { outline:@STD-OUTLINE-FOCUS; }

  :root > caption {
    width:*;
    line-height:1.6em;
    height:1.6em;
    //padding:0.2em 0 0.2em 0.4em;
  }

  //:root:disabled > caption { color:color(widget-disabled-text); }
  //:root:not([step]) > caption { border-radius: length(border-radius); }

  :root > button {
    height:*;
    min-height:5dip;
    width:1.6em;
    box-shadow:none;
    foreground-position:50% 50%;
    foreground-size:5dip;
    foreground-repeat:no-repeat;
    cursor:pointer;
  }

  /*:root > button:hover
  {
    transition:none;
    background:color(button-hover);
  }
  :root > button:active
  {
    background:color(button-hover);
  }
  :root:disabled > button
  {
    background: color(widget-disabled);
    color: color(widget-disabled-text);
    fill: color(widget-disabled-text);
  }*/

  :root > button.minus {
    padding:0;
    foreground-image: url(stock:chevron-down);
  }

  :root > button.plus {
    padding:0;
    foreground-image: url(stock:chevron-up);
  }
}

editbox {
  style-set: std-edit;
}

/* radio button */
radio {
  style-set: std-radio;
}

@set std-radio {
  :root {
    behavior:radio;
    display:block;
    width:max-content;
    line-height:1.4em;
    padding: * 0.6em * 1.8em;
    cursor:pointer;
  }

  :root::marker {
    size:13dip;
    border:2dip solid #bbb;
    border-radius: 8dip;
    margin: * * * 0;
    background: url(stock:disk) 50% 50% no-repeat;
    background-size: 8dip;
    fill: transparent;
    transition: border-color linear 160ms, fill linear 160ms;
  }

  :root:checked::marker {
    fill:color(accent);
    border-color:color(accent);
  }

  :root:tab-focus {
    outline:1dip dashed color(normal) 2dip;
  }
}


/* checkbox button */
checkbox {
  style-set: std-checkbox;
}

@set std-checkbox {
  :root {
    behavior:check;
    display:block;
    width:max-content;
    line-height:1.4em;
    padding: * 0.6em * 1.8em;
    cursor:pointer;
  }

  :root::marker {
    size:12dip;
    border:2dip solid #bbb;
    border-radius: 3dip;
    margin: * * * 0;
    background: url(path:M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z) 50% 50% no-repeat;
    background-size: 0.8em;
    background-color: color(widget-back);
    fill:transparent;
    stroke:none;
    transition: border-color linear 160ms, background-color linear 160ms;
  }

  :root:checked::marker {
    fill:color(widget-back);
    background-color:color(accent);
    border-color:color(accent);
  }

  :root[mixed]:empty::marker {
    background-image: url(path:M1664 416v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z);
    background-size: 0.5em;
    fill:color(widget-text);
  }

  :root:tab-focus {
    outline:1dip dashed color(accent) 2dip;
  }
}

@set std-toggle {
  :root {
    behavior:check;
    display:block;
    width:3em;
    height:1em;
    padding:0.3em;
    border-radius:0.6em;
    background-clip:content-box;
    background:#ddd;
    cursor:pointer;
    transition: background-color linear 160ms;
  }

  :root > option {
    visibility:none;
  }

  :root:checked {
    background-color:color(lighten4);
  }

  :root::marker { // the knob
    display:block;
    background-color:#bbb;
    size:1.4em;
    margin: * * * 0;
    border-radius:0.7em;
    box-shadow: #aaa 1dip 1dip 1dip;
    transform: translate(0em,0);
    transition: background-color linear 160ms, transform quad-out 160ms;
  }

  :root:checked::marker {
    transform: translate(2em,0);
    background-color:var(accent,#000);
  }

  :root:tab-focus {
    outline: 1dip dashed color(normal) 2dip;
  }
}

slider {
  display: inline-block;
  style-set: std-hslider;
}

@set std-hslider < std-hslider-base {
  :root {
    display:block;
    background:#ddd;
    padding:7dip;
    background-clip: content-box;
    background-image: url(stock:block);
    background-repeat:no-repeat;
    background-position:0 0;
    fill:color(accent);
    width:8em;
    height:2dip;
    background-size: var(slider-position,0px) 2dip; // "value" part
  }

  :root > knob {
    size:16dip;
    box-shadow: #aaa 1dip 1dip 1dip;
    background:color(accent);
    foreground: none;
    border:none;
    border-radius:8dip;
    padding:0;
  }

  :root > knob::marker {
    content:attr(value);
    size:32dip 36dip;
    line-height:32dip;
    text-align:center;
    background: no-repeat url(path:M8 2.1c1.1 0 2.2 0.5 3 1.3 0.8 0.9 1.3 1.9 1.3 3.1s-0.5 2.5-1.3 3.3l-3 3.1-3-3.1c-0.8-0.8-1.3-2-1.3-3.3 0-1.2 0.4-2.2 1.3-3.1 0.8-0.8 1.9-1.3 3-1.3z);
    background-size:32dip 36dip;
    fill:color(lighten4);
    stroke:none;
    transform: translate(-8dip, -100%) scale(0);
    transition: transform 160ms;
    transform-origin: 50% 100%;
    filter: drop-shadow(1dip,1dip,1dip,#999);
  }

  :root:focus > knob::marker,
  :root:hover > knob::marker {
    transform: translate(-8dip, -100%) scale(1);
  }
}

input {
  display: block;
  width:8em;
}

@set std-select-dropdown < std-select-dropdown-base {
  :root {
    aspect: Ripple url(theme.js);
    color: color(button-text);
    background: color(button-face);
    box-shadow: #888 1dip 1dip 1dip;
    cursor:pointer;
    padding:0.5em 1em;
  }

  //:root:hover { background: color(lighten3); }
  //:root:active { background: color(lighten5); }

  :root:tab-focus {
    outline: 1dip dashed color(accent) -4dip;
  }

  :root:disabled {
    background:color(button-face-disabled);
    color: color(disabled-text);
    box-shadow: none;
  }

  :root > button {
    padding:0;
    background:none;
    box-shadow:none;
    border:none;
  }
}


@set std-progress < std-progress-base {
  :root {
    display:block;
    width:8em;
    height:0.28em;
    border-style:none;
    padding:0;
    margin:* 0;
    background: color(lighten5);
  }

  :root:not(:busy)::marker {
    width: length(progress-percent);
    height: *;
    background: color(accent);
    stroke:none;
    stroke-width:0;
  }

  :root:busy::marker {
    width:*;
    height:*;
    background-repeat: no-repeat;
    background-image: url(path: M 0 0 L 9 0 L 9 9 L 0 9 Z);
    background-size: 25% 100%;
    fill: color(accent);
    stroke:none;
    stroke-width:0;
    animation: 1.2s infinite alternate std-progress-slide;
  }
}
